<template>
  <div class="page-filter">
    <div class="page-filter-left">
      <a-button type="primary" @click="createSite">新建站点</a-button>
    </div>
    <div class="page-filter-right">
      <a-select
        v-model:value="siteState.site_type"
        placeholder="筛选站点类型"
        class="m-r-24"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
      >
        <a-select-option :value="undefined">全部资源</a-select-option>
        <a-select-option :value="1">种源资源</a-select-option>
        <a-select-option :value="2">外部资源</a-select-option>
      </a-select>
      <a-input
        v-model:value.trim="siteState.site_id"
        class="m-r-24"
        :maxlength="19"
        :onkeyup="
          () => {
            if (siteState.site_id) siteState.site_id = siteState.site_id.replace(/\D/g, '')
          }
        "
        :onafterpaste="
          () => {
            if (siteState.site_id) siteState.site_id = siteState.site_id.replace(/\D/g, '')
          }
        "
        placeholder="请输入站点ID"
      />
      <a-input
        v-model:value.trim="siteState.site_keyword"
        class="input-m-r-16"
        placeholder="请输入站点名称关键词"
        @keyup.enter.native="handleSearch"
      />
      <a-button type="primary" class="m-r-8" @click="handleSearch">搜索</a-button>
      <a-button class="btn-m-r-24" @click="handleReset">重置</a-button>
      <a-tooltip placement="bottom" class="common-icon" color="#fff" :class="isModuleCheck()" @click="handleClick">
        <template #title>
          <span class="common-icon" style="color: #5e5e5e"> 列表视图 </span>
        </template>
        <i class="iconfont icon-liebiao text-[18px]"></i>
      </a-tooltip>
      <a-tooltip placement="bottom" class="common-icon" color="#fff" :class="isListCheck()" @click="handleClick">
        <template #title>
          <span class="common-icon" style="color: #5e5e5e"> 模块视图 </span>
        </template>
        <i class="iconfont icon-mokuai text-[18px]"></i>
      </a-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { siteState, statusState, resetState } from '../state'
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['update-list'])
const createSite = () => {
  router.push({ name: 'EditSite' })
}
const isModuleCheck = computed(() => () => {
  return statusState.isActiveModule ? 'blue-icon' : ''
})
const isListCheck = computed(() => () => {
  return !statusState.isActiveModule ? 'blue-icon' : ''
})
const handleClick = () => {
  statusState.isActiveModule = !statusState.isActiveModule
}

const handleSearch = () => {
  console.log(siteState)
  emit('update-list')
  statusState.isBySearch = true
}
const handleReset = () => {
  resetState()
  console.log(siteState)
  emit('update-list')
  statusState.isBySearch = false
}
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 0;
}

:deep(.blue-icon) {
  border: 1px solid #0083ff !important;
  color: #0083ff;
}

.page-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-right {
    display: flex;
    align-items: center;

    .m-r-24 {
      width: 192px;
      height: 32px;
      margin-right: 24px;
    }

    .input-m-r-16 {
      width: 192px;
      height: 32px;
      margin-right: 16px;
    }

    .btn-m-r-24 {
      margin-right: 24px;
    }

    .m-r-8 {
      margin-right: 8px;
    }

    .common-icon {
      width: 36px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      border: 1px solid #d9d9d9;
      background-color: #f6f6f6;
      cursor: pointer;
    }
  }
}
</style>
